{extend name='admin@main'}
{block name='content'}
<style>
    .store-total-container {
        font-size: 14px;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }
    .store-total-container .store-total-item > div:nth-child(2) {
        font-size: 46px;
        line-height: 46px;
    }
    @media screen and (min-device-width: 992px) {
        .game_distribution {
            width: 50%;
        }
    }
    ::-webkit-scrollbar {width: 10px;height: 10px;background-color: rgba(240, 240, 240, 1);}
</style>
<div class="think-box-shadow">
    {include file='channel/index_search'}
    {notempty name='$user_today_list'}
    <div class="layui_table_width_scroll_36" >
        <table class="layui-table" lay-skin="line" >
            <thead>
            <tr>
                <th class="text-left">日期</th>
                <th class="text-left">渠道</th>
                <th class="text-left nowrap">活跃人数</th>
                <th class='text-left nowrap'>新增人数</th>
                <th class='text-left nowrap'>付费金额</th>
                <th class='text-left nowrap'>付费次数</th>
                <th class='text-left nowrap'>付费人数</th>
                <th class='text-left'>新用户付费金额</th>
                <th class='text-left'>新用户付费人数</th>
                <th class='text-left'>新增用户游戏在线时长(分钟)</th>
                <th class='text-left'>新增用户游戏平均在线时长(分钟)</th>
            </tr>
            </thead>
            <tbody>
            {foreach $user_today_list as $key=>$vo}
            <tr>
                <td class='text-left nowrap'>
                    <span class="color-blue">{$vo.time}</span>
                </td>
                <td class='text-left nowrap'>
                    {eq name='$vo.channel_name' value='0' }
                    官方-0-渠道
                    {else}
                    {$vo.channel_name}
                    {/eq}
                </td>
                <td class='text-left nowrap'>
                    {$vo.logincount}
                </td>
                <td class='text-left nowrap'>
                    {$vo.newcount}
                </td>
                <td class='text-left nowrap'>
                    {eq name='$vo.recharge' value='0' }
                    --
                    {else}
                    <span class="color-red">{$vo.recharge}￥</span>
                    {/eq}
                </td>
                <td class='text-left nowrap'>{$vo.recharge_time}</td>
                <td class='text-left nowrap'>{$vo.recharge_count}</td>
                <td class='text-left nowrap'>{$vo.new_recharge}</td>
                <td class='text-left nowrap'>{$vo.new_recharge_count}</td>
                <td class='text-left nowrap'>
                    {eq name='$vo.add_user_online_time' value='0' }
                    --
                    {else}
                    <span class="color-green">{$vo.add_user_online_time}分钟</span>
                    {/eq}
                </td>
                <td class='text-left nowrap'>
                    {eq name='$vo.add_user_online_avg_time' value='0' }
                    --
                    {else}
                    <span class="color-blue">{$vo.add_user_online_avg_time}分钟</span>
                    {/eq}
                </td>
            </tr>
            {/foreach}
            </tbody>
        </table>
    </div>
    <table class="layui-table margin-top-10" lay-skin="line" >
        <thead>
        <tr>
            <th class="text-left nowrap" style="padding-left: 3em;" >合计</th>
            <th class='text-left nowrap'>活跃人数:<?php echo array_sum(array_column($user_today_list,'logincount')); ?></th>
            <th class='text-left nowrap'> 新增人数:<?php echo array_sum(array_column($user_today_list,'newcount')); ?></th>
            <th class='text-left nowrap'>付费金额:<?php echo array_sum(array_column($user_today_list,'recharge')); ?></th>
            <th class='text-left '>付费次数:<?php echo array_sum(array_column($user_today_list,'recharge_time')); ?></th>
            <th class='text-left '>付费用户:<?php echo array_sum(array_column($user_today_list,'recharge_count')); ?></th>
            <th class='text-left '>新用户付费金额:<?php echo array_sum(array_column($user_today_list,'new_recharge')); ?></th>
            <th class='text-left '>新用户付费人数:<?php echo array_sum(array_column($user_today_list,'new_recharge_count')); ?></th>
        </tr>
        </thead>
    </table>
    <div class="think-box-shadow store-total-container notselect">
            <div class="layui-row layui-col-space15">
                    <div class="margin-bottom-15">玩家充值分布 <b style="font-size: 12px;color: #ccc;"></b></div>
                    <div id="user_recharge" style="height:550px;">
                    </div>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm6 layui-col-md2 game_distribution" >
                    <div class="margin-bottom-15">新增玩家分布 <b style="font-size: 12px;color: #ccc;"></b></div>
                    <div id="game_Billing_point" style="height:550px;">
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md2 game_distribution">
                    <div class="margin-bottom-15">活跃玩家分布 <b style="font-size: 12px;color: #ccc;"></b></div>
                    <div id="games_recharge" style="height:550px;">
                    </div>
                </div>
            </div>
    </div>
    <script>
            require(['echarts'], function (echarts, chart) {
                chart = echarts.init(document.getElementById('user_recharge'));
                window.onresize = chart.resize;
                var seriesLabel = {
                    normal: {
                        show: true,
                        textBorderWidth: 1
                    }
                }
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: eval('{:json_encode($user_data_info.myrecharge.channel_name)}')
                    },
                    grid: {
                        left: 180
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        inverse: true,
                        data: eval('{:json_encode($user_data_info.myrecharge.channel_name)}'),
                        axisLabel: {
                            margin: 20,
                            rich: {
                                value: {
                                    lineHeight: 50,
                                    align: 'left'
                                },
                            }
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            label: seriesLabel,
                            data: eval('{:json_encode($user_data_info.myrecharge.data)}'),
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    color: '#dd7538'
                                }
                            }
                        }
                    ]
                };
                chart.setOption(option);
            });
        </script>
    <script>
            require(['echarts'], function (echarts, chart) {
                chart = echarts.init(document.getElementById('game_Billing_point'));
                window.onresize = chart.resize;
                var seriesLabel = {
                    normal: {
                        show: true,
                        textBorderWidth: 1
                    }
                }
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: eval('{:json_encode($user_data_info.mynewcount.channel_name)}')
                    },
                    grid: {
                        left: 180
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#cccccc'
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        inverse: true,
                        data: eval('{:json_encode($user_data_info.mynewcount.channel_name)}'),
                        axisLabel: {
                            margin: 20,
                            rich: {
                                value: {
                                    lineHeight: 10,
                                    align: 'left'
                                },
                            }
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            label: seriesLabel,
                            data: eval('{:json_encode($user_data_info.mynewcount.data)}'),
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    color: '#1E41FF'
                                }
                            }
                        }
                    ]
                };
                chart.setOption(option);
            });
        </script>
    <script>
            require(['echarts'], function (echarts, chart) {
                chart = echarts.init(document.getElementById('games_recharge'));
                window.onresize = chart.resize;
                var seriesLabel = {
                    normal: {
                        show: true,
                        textBorderWidth: 1
                    }
                }
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: eval('{:json_encode($user_data_info.mylogincount.channel_name)}')
                    },
                    grid: {
                        left: 180
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        inverse: true,
                        data: eval('{:json_encode($user_data_info.mylogincount.channel_name)}'),
                        axisLabel: {
                            margin: 20,
                            rich: {
                                value: {
                                    lineHeight: 10,
                                    align: 'left'
                                },
                            }
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            label: seriesLabel,
                            data: eval('{:json_encode($user_data_info.mylogincount.data)}'),
                            itemStyle: {
                                normal: {
                                    borderWidth: 3,
                                    color: '#159077'
                                }
                            }
                        }
                    ]
                };
                chart.setOption(option);
            });
        </script>
    {else/}
        <span class="notdata">没有记录哦</span>
    {/notempty}
    {/block}
</div>